<template>
	<view v-if="myIsShow">
		<view class="bg"></view>
		<Tabbar :current-page="2"></Tabbar>
		<!-- 导航 -->
		<view class="tabbar-box">
			<view class="" v-for="item in tabbar" :key="item.id" @click="pickNav(item.id)">
				<view :class="item.id==navIndex?'lines':'name-box'">{{ item.name }}</view>
			</view>
		</view>

		<!-- 注销订单列表 -->
		<view v-if="navIndex==1">
			<view class="details-box" v-for="(item,index) in listDetail" :key="index">
				<view class="top-boxs">
					<view class="top-box">
						<image src="/static/imges/cars.png" mode="widthFix"></image>
						<view class="">{{ item.car_number }}</view>
					</view>
					<view class="top-btn1" v-if="item.status==1">待注销</view>
					<view class="top-btn2" v-if="item.status==2">待支付</view>
					<view class="top-btn2" v-if="item.status==3">已完成</view>
				</view>
				<view class="cells-box">
					<view class="cells" style="margin-top: 42rpx;">
						<view class="" style="color: #6B6B6B;">联系人</view>
						<view class="">{{ item.name }}</view>
					</view>
					<view class="cells">
						<view class="" style="color: #6B6B6B;">联系电话</view>
						<view class="">{{ item.phone }}</view>
					</view>
					<view class="cells">
						<view class="" style="color: #6B6B6B;">提交时间</view>
						<view class="">{{ item.createtime }}</view>
					</view>
					<view class="cells">
						<view class="" style="color: #6B6B6B;">注销费用</view>
						<view class="">￥{{ item.price||'待查询' }}</view>
					</view>
					<view class="cells">
						<view class="" style="color: #6B6B6B;">注销说明</view>
						<view class="hint">{{ item.etcCancelExplain || '待填写' }}</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="btn-del" v-if="item.status==1">待查询</view>
					<view class="btns payBtns" style="margin-left: 20rpx" v-if="item.status==2">立即支付</view>
				</view>


				<!--      <view class="btn-box">
         <view class="btn-del" v-if="item.etcCancelStatus===3" @click="delOrder(item.id,index)">删除订单</view>
          <view class="btns payBtns" style="margin-left: 20rpx" v-if="item.etcCancelStatus===11" @click="payNow(item)">立即支付</view>
          <view class="btns" @click="pickDetail(item.id,navIndex)">查看详情</view>
          <view class="btn-new" v-if="item.etcCancelStatus===2" @click="goEtcManage">去新办</view>
          <view class="item-info" v-if="item.etcCancelStatus==1&&item.etcCancelFillInStatus ==2" @tap.stop="$u.throttle(aubUserInfo(item.id), 2600)">填写资料</view>
        </view> -->
			</view>
			<view style="padding-bottom: 180rpx" v-if="listDetail.length!=0">
				
				<contact-button
				  tnt-inst-id="SLk_aEqp"
				  scene="SCE01288627"
				  size="88rpx"
				  icon="/static/img/custom.png"
				/>
				联系客服
			</view>
		</view>

		<!-- 办理订单列表 -->
		<view v-if="navIndex==2">
			<view class="details-box" v-for="(item,index) in listDetails" :key="index">
				<view class="top-boxs">
					<view class="top-box">
						<image src="/static/imges/cars.png" mode="widthFix"></image>
						<view class="">{{ item.car_number }}</view>
					</view>
					<view class="top-btn1" v-if="item.status!=3">待支付</view>
					<view class="top-btn1" v-if="item.status==3">已完成</view>
				</view>
				<view class="cells-box">
					<view class="cells" style="margin-top: 42rpx;">
						<view class="" style="color: #6B6B6B;">联系人</view>
						<view class="">{{ item.name }}</view>
					</view>
					<view class="cells">
						<view class="" style="color: #6B6B6B;">联系电话</view>
						<view class="">{{ item.phone }}</view>
					</view>
					<view class="cells">
						<view class="" style="color: #6B6B6B;">地址</view>
						<view class="">{{ item.area }}{{item.detail}}</view>
					</view>
					<view class="cells">
						<view class="" style="color: #6B6B6B;">提交时间</view>
						<view class="">{{ item.createtime }}</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="btns payBtns" v-if="item.status!=3" @click="payNow(item)">待支付</view>
					<view class="btns payBtns" style="margin-left: 20rpx" v-if="item.status==3" >
						已完成
					</view>
				</view>
			</view>
			<view style="padding-bottom: 180rpx" v-if="listDetails.length!=0">
				<!-- <button class="btns-box" open-type="contact">联系客服</button> -->
				<contact-button
				  tnt-inst-id="SLk_aEqp"
				  scene="SCE01288627"
				  size="88rpx"
				  
				  icon="/static/img/custom.png"
				/>
				联系客服
			</view>
		</view>


		<!--		<view class="btns-box" @click="toCustomers()">联系客服</view>-->
		<!--    <view style="padding-bottom: 50rpx">-->
		<!--      <button class="btns-box" v-if="listDetails.length!=0" open-type="contact">联系客服</button>-->
		<!--    </view>-->

		<u-empty mode="data" v-if="emptyShow" icon="/static/imges/data.png"></u-empty>
	</view>
</template>

<script lang="ts">
	// @ts-nocheck
	import Vue from 'vue';
	import { getRoles } from "../../api/common/login";
	import Tabbar from "../../components/tabbar.vue";
	import { delEtcCancelOrder, getEtcApply, getEtcCancel, getEtcCancelDetails } from "../../api/order/order";
	import { doEtc, getEtcOrderId, WeChatPay } from "../../api/api";
	import { pay } from "../../utils/pay";
	import { getDictAll } from "../../api/common/dict";
	import { getOrder ,goPay} from "@/api/my/my"
	let app = getApp();
	export default Vue.extend({
		components: { Tabbar },
		data() {
			return {
				myIsShow: app.globalData.myIsShow,
				emptyShow: false,
				userInfo: '',
				page: 1,
				pages: 0,
				total: 0,
				navIndex: 1,
				tabbar: [{
					id: 1,
					name: '注销订单'
				},
				{
					id: 2,
					name: '办理订单'
				}
				],
				listDetail: [],
				listDetails: [],
				hintText: '',
			}
		},
		onLoad(options : any) {
			uni.setStorageSync('navIndex', this.navIndex)
			this.page = 1;
			this.total = 0;
			this.listDetail = []
			this.listDetails = []
			// this.pickNav(this.navIndex)
		},
		async onReachBottom() {
			if (this.page < this.pages) {
				this.page = this.page + 1;
			} else {
				uni.showToast({
					title: '已经到底了!',
					icon: 'none',
					duration: 2000
				});
				return
			}
			if (this.navIndex == 1) {
				await this.getCancelList()//注销订单
			} else {
				await this.getApplyList()//办理订单
			}
		},
		async onShow() {
			this.pickNav(this.navIndex)
			const roles = await getRoles()
			if (roles.indexOf('role:login_app') === -1) {
				uni.navigateTo({
					url: '/pages/common/nick_avatar'
				})
			}
			await this.getHint();//获取提示语
			// if (roles.indexOf('role:realname') === -1) {
			//   uni.showModal({
			//     title: '创建订单需要实名认证',
			//     content: '是否跳转到实名申请页面？',
			//     success: (result => {
			//       if (result.confirm) {
			//         console.log('将跳转到实名认证页面')
			//       }
			//       if (result.cancel){
			//         uni.navigateBack()
			//       }
			//     })
			//   })
			// }


			this.navIndex = uni.getStorageSync('navIndex') || this.navIndex
		},
		methods: {
			// 立即办理
			goEtcManage() {
				uni.redirectTo({
					url: '/pages/index/select-pay'
				})
			},
			async getHint() {
				const params = {
					dictCode: 'write_off_prompt_to_be_signed_out'
				}
				const data = await getDictAll(params)
				// console.log(data,'提示语');
				this.hintText = data[0].dictInfoValue;
				// console.log(data, '获取首页公告')
			},
			//导航
			pickNav(id : any) {
				this.navIndex = id
				uni.setStorageSync('navIndex', this.navIndex)
				this.page = 1;
				this.total = 0;
				if (id == 1) {
					this.listDetail = []
					this.getCancelList()//注销订单
				} else {
					this.listDetails = []
					this.getApplyList()//办理订单
				}
			},

			// 注销列表
			async getCancelList() {
				// const params = {
				//   pageIndex: this.page,
				//   pageSize: 10
				// };
				const data = await getOrder(1)
				this.listDetail = this.listDetail.concat(data.data);
				this.total = data.total;
				this.pages = data.pages;
				if (this.listDetail.length == 0) {
					this.emptyShow = true
				} else {
					this.emptyShow = false
				}

			},
			// 办理订单
			async getApplyList() {
				const params = {
					pageIndex: this.page,
					pageSize: 10
				};
				const data = await getOrder(2)
				this.listDetails = this.listDetails.concat(data.data);
				this.total = data.total;
				this.pages = data.pages;
				if (this.listDetails.length == 0) {
					this.emptyShow = true
				} else {
					this.emptyShow = false
				}
			},

			// 删除注销订单
			async delOrder(id : any, index : number) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '您确定要删除这个订单吗?',
					success: (async res => {
						if (res.confirm) {
							const { code, data, msg } = await delEtcCancelOrder(id)
							if (code === 'A000') {
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									duration: 1500
								})
								that.pickNav(this.navIndex)
								that.listDetail.splice(1, index)
								that.emptyShow = that.listDetail.length == 0
								// console.log('++++++',that.listDetail)
							} else {
								uni.showToast({
									title: msg,
									icon: 'none',
									duration: 1500
								})
							}
						}
					})
				})
			},
			// 填写资料
			aubUserInfo(id : any) {
				uni.navigateTo({
					url: '/pages/orders/etc-userInfo?id=' + id
				})
			},
			//  跳转详情
			pickDetail(id : number, navIndex) {
				uni.navigateTo({
					url: '/pages/orders/orders-details?id=' + id + '&navIndex=' + navIndex
				})
			},
			//   跳转客服
			toCustomers() {
				uni.switchTab({
					url: '/pages/customer/customer'
				})
			},
			// 立即支付
			async payNow(item : any) {
				uni.showModal({
					content:"是否支付该订单?",
					title:'支付提示',
					success:async (res) => {
						if(res.confirm){
							const {data}=await goPay(item.id)
							uni.requestPayment({
								provider:'alipay',
								orderInfo:data,
								success: (res) => {
									console.log(res)
								}
							})
						}
					}
				})
				
				return false

			},
			pay(pid : any, uid : any) {
				let that = this
				WeChatPay(pid).then(res => {
					pay(res, (res) => {
						//这里是支付成功的回调
						uni.showToast({
							title: '支付成功',
							icon: "none"
						});
						that.listDetail = []
						that.getCancelList()//注销订单
						uni.navigateTo({
							// url: '/pages/index/success?type=1'
							url: '/pages/orders/etc-userInfo?id=' + uid
						})
						// uni.navigateBack()
					}, (res2) => {
					})
				}).catch(Error => {
					console.log('支付失败：', Error)
				})
			},


		}
	})
</script>

<style>
	.bg {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	/* 可移动按钮 */
	.movableArea {
		position: fixed;
		top: 0rpx;
		left: 0;
		bottom: 200rpx;
		width: 100%;
		height: 100%;
		pointer-events: none;
		/* //设置area元素不可点击，则事件便会下移至页面下层元素 */
		z-index: 100;
	}

	.movableView {
		pointer-events: auto;
		/* //可以点击 */
		width: 88rpx;
		height: 88rpx;
	}

	.bg-img {
		width: 100%;
		height: 100%;
	}

	.bg-btn {
		background-color: #00000000;
		padding: 0;
	}

	button::after {
		border: none;
	}

	.tabbar-box {
		background-color: #0C77FB;
		color: #fff;
		font-size: 30rpx;
		padding-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 10rpx;
	}

	.name-box {
		padding-bottom: 36rpx;
	}

	.lines {
		padding-bottom: 30rpx;
		border-bottom: 6rpx solid #fff;

	}

	/* 订单 */
	.details-box {
		margin: 26rpx 32rpx 0;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 20rpx 27rpx 24rpx 0;
	}

	.top-boxs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		color: #0C77FB;
	}

	.top-box {
		display: flex;
		align-items: center;
		width: 304rpx;
		height: 92rpx;
		font-size: 32rpx;
		background: linear-gradient(27deg, #449CFE, #1777FF);
		border-radius: 0rpx 46rpx 46rpx 0rpx;
		color: #fff;
	}

	.top-box image {
		width: 45rpx;
		height: 42rpx;
		margin-left: 28rpx;
		margin-right: 18rpx;
	}

	/*订单状态*/
	.top-btn1 {
		color: #000000;
	}

	.top-btn2 {
		color: #F93738;
	}

	.top-btn3 {
		color: #0C77FB;
	}

	.cells {
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}

	.cells .hint {
		width: 450rpx;
		word-break: break-all;
		text-align: right;
		/*border: 1rpx solid pink;*/
	}

	.cells-box {
		margin-left: 35rpx;
		padding-bottom: 33rpx;
		border-bottom: 2rpx solid #F6F6F6;
	}

	.btn-box {
		margin-top: 22rpx;
		display: flex;
		flex-direction: row-reverse;
		/* width: 142rpx;
  height: 62rpx;
  text-align: center;
  line-height: 62rpx; */

		font-size: 24rpx;
	}

	.btns {
		padding: 19rpx 22rpx;
		border: 2rpx solid #0C77FB;
		border-radius: 10rpx;
		color: #0C77FB;
	}

	.btn-del {
		margin-left: 20rpx;
		padding: 19rpx 22rpx;
		border: 2rpx solid #d31919;
		border-radius: 10rpx;
		color: #d31919;
	}

	.payBtns {
		background: #0C77FB;
		color: #fff;
	}

	.btn-new {
		margin-right: 20rpx;
		padding: 19rpx 22rpx;
		border: 2rpx solid #d31919;
		border-radius: 10rpx;
		color: #d31919;
	}

	.item-info {
		/*width: 168rpx;*/
		padding: 19rpx 22rpx;
		border: 2rpx solid #5A5A5A;
		border-radius: 10rpx;
		color: #5A5A5A;
		font-size: 28rpx;
		font-weight: 500;
		display: grid;
		place-items: center;
		margin-right: 20rpx;
	}

	/*  */
	.btns-box {
		margin: 80rpx 27rpx 0;
		width: 696rpx;
		height: 100rpx;
		background: #1A6FFD;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
	}
</style>